<template>
  <layout-empty>
    <view class="pm-approval-bg">
      <view class="bg-img"></view>
    </view>
    <view class="pm-approval-container">
      <view class="pi-navbar-box">
        <view class="pi-navbar-left flex flex-row align-center">
          <uni-icons @click="gotoPreRoute" color="#fff" type="left" size="24"></uni-icons>
        </view>
        <view class="pi-navbar-title flex-grow-1">
          {{ processInstanceDetail?.name }}
        </view>
        <view class="pi-navbar-right flex-shrink-0 flex flex-row align-center">
          <view class=" process-icon-box">
            <image :src="ProcessSvg" class="process-icon"></image>
            流程
          </view>
        </view>
      </view>
      <view v-if="PiDetailComponent" class="pm-approval__body">
        <pi-detail-component ref="PiDetailRef"/>
      </view>
    </view>
    <!-- 底部点赞评论收藏区 固定定位到底部 左边是评论输入框 右边是 评论 点赞 收藏  -->
    <BottomComment @articleCommentInputFocus="articleCommentInputFocus">
      <template #bc-tool>
        <view class="transfer-box" @click="openTransferPopup">
          <iconfont color="#000" name="icon-a-chaosongrenchaosongyonghu-022"></iconfont>
          <view class="btn-content">转办</view>
        </view>
      </template>
    </BottomComment>
    <!-- 评论输入框 -->
    <TextareaComment ref="textareaCommentRef" v-model:showInputPop="showInputPop">
      <template #release-btn>
        <view class="flex flex-row">
          <view class="approval-btn not-pass-btn" @click="handleAudit(false)">不通过</view>
          <view class="approval-btn pass-btn" @click="handleAudit(true)">通过</view>
        </view>
      </template>
    </TextareaComment>
  </layout-empty>
  <process-transfer-popup ref="ptPopupRef"></process-transfer-popup>
</template>

<script setup lang="ts">
import LayoutEmpty from "@/layouts/empty.vue";
import {usePmBpmApi} from "@/api/pm/bpm";
import {gotoPreRoute} from "@/utils";
import viewComponents from "@/utils/registerViewModules";
import {usePmAppStore} from "@/stores";
import {PmBpmResult} from "@/enum";
import ProcessTransferPopup from "@/pmPages/bpm/approval/transfer.vue";
import ProcessSvg from '@/static/icons/process.svg'

defineOptions({name: 'PmBpmApproval'})

let processId: string = null;
let projectNumber: string = null;
const PiDetailComponent = shallowRef<Component>(null);
const processInstanceDetail = ref<ProcessInstanceDetail>();

async function getDetail() {
  await getProcessInstance()
  await getTaskList()
}

const myTask = ref<PmBpmTask>(null);

async function getTaskList() {
  const res = await usePmBpmApi().getBpmTaskListByPiId(processId)
  if (res.code === 0 && res.data) {
    const {userInfo} = usePmAppStore()
    const list = res.data.filter((item: PmBpmTask) =>
      item.assigneeUser.id === userInfo.id && parseInt(item.result) !== PmBpmResult.CANCEL
    );
    if (list && list.length > 0) {
      myTask.value = list[0];
    }
  }
}

async function getProcessInstance() {
  const res = await usePmBpmApi().getProcessInstance(processId)
  if (res.code === 0 && res.data) {
    processInstanceDetail.value = res.data as ProcessInstanceDetail;
    PiDetailComponent.value = viewComponents[`/src/views${processInstanceDetail.value.processDefinition.formCustomViewPath}.vue`]
      || viewComponents[`/src/views${processInstanceDetail.value.processDefinition.formCustomViewPath}`];
  }
}

// 评论输入框组件
const textareaCommentRef = ref()

// 新建评论弹窗
const showInputPop = ref(false)

// 文章评论聚焦
const articleCommentInputFocus = (type: number, e?: CommentRootList) => {
  showInputPop.value = true
  nextTick(() => {
    textareaCommentRef.value && textareaCommentRef.value.inputFocus(type, e)
  })
}

const PiDetailRef = ref();

function handleAudit(pass: boolean) {
  const commentParams = textareaCommentRef.value.commentParams;
  const content = commentParams.content
  if (content?.length) {
    let businessData: any = {};
    if (PiDetailRef.value && PiDetailRef.value.handleBusinessFn) {
      PiDetailRef.value.handleBusinessFn().then((res: any) => {
        businessData = res;
        handleAuditRequest(pass, content, businessData)
      })
    } else {
      handleAuditRequest(pass, content, businessData)
    }
  } else {
    uni.showToast({
      title: '评论内容不能为空',
      icon: 'none',
    })
  }
}

const ptPopupRef = ref();
function openTransferPopup() {
  if (ptPopupRef.value) {
    ptPopupRef.value.open(myTask.value.id);
  }
}

function handleAuditRequest(pass: boolean, content: string, businessData: Record<string, any> = {}) {
  if (pass) {
    usePmBpmApi().approveTask({
      id: myTask.value.id,
      reason: content,
      businessData,
    }).then((res) => {
      showInputPop.value = false
      if (res.code === 0) {
        showInputPop.value = false
        uni.showToast({
          icon: null,
          title: '流程已通过',
          complete: () => {
            uni.navigateTo({url: '/pmPages/index/index'})
          }
        })
      }
    })
  } else {
    usePmBpmApi().rejectTask({
      id: myTask.value.id,
      reason: content,
    }).then((res) => {
      console.log(res)
      if (res.code === 0) {
        showInputPop.value = false
        uni.showToast({
          icon: null,
          title: '流程已拒绝',
          complete: () => {
            uni.navigateTo({url: '/pmPages/index/index'})
          }
        })
      }
    })
  }
}

onLoad((query) => {
  processId = query['process_instance_id'];
  projectNumber = query['project_number'];
  getDetail();
})
</script>

<style scoped lang="scss">
@import 'src/styles/bg/todoBg';

.transfer-box {
  width: 60rpx;
  text-align: center;

  .btn-content {
    font-size: 24rpx;
    letter-spacing: 2rpx;
  }
}

.approval-btn {
  color: #fff;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  margin-left: 30rpx;
  font-size: 32rpx;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  text-align: center;
}

.pass-btn {
  background-color: #67C23A;
}

.not-pass-btn {
  background-color: #F56C6C;
}

.pm-approval-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #EDF4FC;

  .bg-img {
    width: 100%;
    height: 100%;
    background-image: $--oa-todo-bg;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
  }
}

.pm-approval-container {
  position: relative;
  z-index: 9;
  height: 100%;
  padding-bottom: 120rpx;
  box-sizing: border-box;

  .pi-navbar-box {
    position: relative;
    height: 90rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    line-height: 90rpx;
    text-align: center;

    .pi-navbar-left {
      position: absolute;
      left: 40rpx;
      top: 0;
      height: 100%;
    }

    .pi-navbar-title {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }

    .pi-navbar-right {
      position: absolute;
      right: 40rpx;
      top: 0;
      height: 100%;
      color: #fff;
      line-height: normal;
    }
  }

  .pm-approval__body {
    position: relative;
    height: calc(100% - 90rpx);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .process-icon-box {
    background: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    font-size: 14px;
    padding: 4rpx 12rpx;

    .process-icon {
      width: 20rpx;
      height: 20rpx;
    }
  }
}
</style>
